<template>
  <div id="add-blog">
   <h2>添加博客</h2>
   <form action="" v-if='!submited'>
       <label for="">博客标题</label>
       <a href="https://cn.vuejs.org/v2/guide/forms.html">一些官方表单基础</a>
       <input type="text" placeholder="请输入博客标题..." v-model.lazy="blog.title" required>

       <label for="">博客内容</label>
       <textarea name="" id="" cols="5" rows="10" placeholder="请输入博客内容..." v-model="blog.content"></textarea>

        <label for="">分类</label>
       <div id="checkboxes">
           <label for="">Vue.js</label>
           <input type="checkbox" value="Vue.js" v-model="blog.categories">
           <label for="">Node.js</label>
           <input type="checkbox" value="Node.js" v-model="blog.categories">
           <label for="">React.js</label>
           <input type="checkbox" value="React.js" v-model="blog.categories">
           <label for="">Angular4.js</label>
           <input type="checkbox" value="Angular4.js" v-model="blog.categories">
       </div>
       <!-- <label for="author">作者</label>
       <select v-model="blog.author" name="author">
           <option value="" v-for="(val,i) in authors" :key="i">   遍历的时候，由于里面含有value  为空，故每次选择后不会展示出来
               {{val}}
           </option>
       </select> -->

       <label for="zz">作者</label>
       <select name="zz" v-model="blog.auth">
           <option value="" disabled>请选择作者</option>
           <option  v-for="(val ,i ) in Allauthors" :key="i">
               {{val}}
           </option>
       </select>
       <button v-on:click.prevent="post">添加博客</button>
   </form>
    <div v-if='submited'>
        <h3>你的博客发布成功！</h3>
    </div>
    <hr>

   <div id="preview">
       <h3>博客展示</h3>
       <p>博客标题：{{blog.title}}</p>
       <p>博客内容：</p>
       <p>{{blog.content}}</p>
       <p>博客分类：
            <ul>
                <li v-for="(category, i) in blog.categories" :key="i">{{category}}</li>
            </ul>
       </p>
       <p>作者：{{blog.auth}}</p>
   </div>
  </div>
</template>

<script>

import axios from "axios";
export default {
  name: 'ldadd-blog',
  data () {
    return {
      blog:{
          title:"",
          content:"",
          categories:[],
          auth:""
      },
      Allauthors:["张三","李四","王二麻子","赵六"],
      submited:false
    }
  },
  methods:{
    //   post:function(){
    //       this.$http.post("https://jsonplaceholder.typicode.com/posts",
    //       {
    //           title:this.blog.title,
    //           body:this.blog.content,
    //           userId:1
    //       }).then(function(data){
    //           console.log(data);
    //           this.submited = true
    //       })
    // }
    post:function(){
        var _this = this
          axios.post("https://jsonplaceholder.typicode.com/posts",this.blog)
        //   .then(function(data){
        //       console.log(data);
        //       _this.submited = true
        //   })
        .then((data)=>{
            console.log(data);
            this.submited = true
          })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    #add-blog *{
        box-sizing: border-box;
    }
    #add-blog{
        margin: 85px auto 20px;
        max-width: 600px;
        padding: 20px
    }
    label{
        display: block;
        margin: 20px 0 10px;
    }
    input[type=text], textarea, select{
        display: block;
        width: 100%;
        padding: 8px;
    }
    #checkboxes label{
        display: inline-block;
        margin-top: 0px;
    }
    #checkboxes input{
        display: inline-block;
        margin-right: 10px;
    }
    button{
        display: block;
        margin: 20px auto;
        background-color: crimson;
        border: none;
        padding: 14px;
        border-radius: 7px;
        font-size: 16px;
        cursor: pointer;
    }
    #preview{
        padding: 10px 20px;
        border: 1px dotted #ccc;
        margin: 30px 0;
    }
    #preview ul{
        display: inline;
        padding-left: 10px;
    }
    #preview li{
        display: inline-block;
        margin-right: 20px;
    }
    h2, h3{
        margin-top: 10px;
        text-align: center;
    }
</style>
